<template>
  <div class="play">
    <!-- 背景图 -->
    <div
      class="back"
      :style="`background-image: url(https://imagev2.xmcdn.com/${playHearchImg?.albumInfo.cover});`"
    ></div>
    <!--  -->
    <div class="header">
      <div class="playHeader">
        <div @click="toHome" class="headerImg">
          <img
            src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
          />
        </div>
        <div class="headerBtn">打开</div>
      </div>

      <div class="playMain">
        <div class="playLeft">
          <img
            class="playLeftImg"
            :src="`https://imagev2.xmcdn.com/${playHearchImg?.albumInfo.cover}`"
          />
          <div class="playLeftTitle">
            <div class="iconfont icon-24gl-headphones"></div>
            <div class="playLeftNum">
              {{
                ((playHearchImg?.statCountInfo.subscribeCount / 10000).toFixed(
                  2
                ) as any) < 10000
                  ? `${(
                      playHearchImg?.statCountInfo.subscribeCount / 10000
                    ).toFixed(2)}万`
                  : `${(
                      playHearchImg?.statCountInfo.subscribeCount / 100000000
                    ).toFixed(2)}亿`
              }}
            </div>
          </div>
        </div>
        <div class="playRight">
          <div class="playRightTop">{{ playHearchImg?.albumInfo.title }}</div>
          <div class="playRightMain">
            <div class="playRightMainImg">
              <img
                class="Image"
                :src="`https://imagev2.xmcdn.com/${playHearchImg?.albumInfo.cover}`"
                alt=""
              />
            </div>
            <div class="playRightMainTitle">XXX主播</div>
          </div>
          <div class="playRightBottom">
            已订阅
            {{
              ((playHearchImg?.statCountInfo.playCount / 10000).toFixed(
                2
              ) as any) < 10000
                ? `${(playHearchImg?.statCountInfo.playCount / 10000).toFixed(
                    2
                  )}万`
                : `${(
                    playHearchImg?.statCountInfo.playCount / 100000000
                  ).toFixed(2)}亿`
            }}
            人
          </div>
        </div>
      </div>
      </div>

      

    <div v-if="flag" class="mainText">
      <div class="richIntro" v-html="richIntro">

      </div>
      <div class="shade"></div>
      <div class="mask">
        <div @click="btn" class="iconfont icon-xiangxiajiantoux"></div>
        <div class="btn">打开APP,完整收听</div>
      </div>
    </div>
    <div v-else class="mainText2">
      <div class="richIntro" v-html="richIntro"></div>
      <div class="mask">
        <div class="btn">打开APP,完整收听</div>
      </div>
    </div>


    <!-- 播放列表 -->
    <div class="playList">
        <div class="playListTop">
          <div class="playListTopLeft">节目({{ totalCount }})</div>
          <div @click="convert" class="playListTopRight"><i class="iconfont icon-shangxiajiantou-copy"></i>切换顺序</div>
        </div>
        <div class="playListBottom">
          <div v-for="item in trackDetailInfos" :key="item.id"  class="playListBottomCrad">
            <div class="iconfont icon-bofang1-copy"></div>
            <div class="title">{{ item.trackInfo.title }}</div>
            <div class="iconfont icon-download-1-copy-copy"></div>
          </div>
      </div>
      <div class="bottom">
        加载更多<i class="iconfont icon-xiangxiajiantoux"></i>
      </div>
    </div>


    <!-- 主播 -->
    <div class="anchor">
      <div class="anchorTop">
        <div>主播信息</div>
      </div>
      <div class="anchorMain">
        <div class="anchorImg">
          <img :src="`https://imagev2.xmcdn.com/${userInfo?.logo}`" alt="">
        </div>
        <div class="anchorText">
          <div class="top">{{ userInfo?.nickname }}</div>
          <div class="main">{{ userInfo?.personalSignature }}</div>
          <div class="bottom">{{ ((statCountInfo?.followerCount / 10000).toFixed(
                2
              ) as any) < 10000
                ? `${(statCountInfo?.followerCount  / 10000).toFixed(
                    2
                  )}万`
                : `${(
                  statCountInfo?.followerCount  / 100000000
                  ).toFixed(2)}亿` }}</div>
        </div>
        <div class="anchorRight">
          <i class="iconfont icon-jiaguanzhuren-copy"></i>
          <div class="text">加关注</div>
        </div>
      </div>
    </div>


    <!-- 主播作品 -->
    <div class="peopleWrap">
      <div v-for="item in albumBriefDetailInfos" :key="item.id" class="peopleCard">
          <div
            class="peopleImg"
            :style="`background-image: url(https://imagev2.xmcdn.com/${item.albumInfo?.cover});`"
          >
            <div class="peopleImgBottom">
              <div class="iconfont icon-bofang_o-copy"></div>
              <div class="right">
                {{
                  ((item.statCountInfo?.playCount / 10000).toFixed(2) as any) < 10000
                    ? `${(item.statCountInfo?.playCount / 10000).toFixed(2)}万`
                    : `${(item.statCountInfo?.playCount / 100000000).toFixed(2)}亿`
                }}
              </div>
            </div>
          </div>
          <div class="peopleIntroduce">
            {{ item.albumInfo?.title }}
          </div>
        </div>
    </div>


    <!-- 用户评论 -->
    <div class="comment">
      <div class="commentTop">
        <div>用户评论</div>
      </div>
      <div v-for="item in comments" :key="item.id" class="commentBottom">
        <div class="commentBottomImg">
          <img :src="`https://imagev2.xmcdn.com/${item.smallHeader}`" alt="">
        </div>
        <div class="commentBottomText">
          <div class="name">{{ item.nickname }}</div>
          <div v-html="item.content" class="main"></div>
          <div class="reply">
            <div class="left">回复{{ new Date(item.createdAt).toLocaleDateString().replace(/\//g , "-")}}</div>
            <div class="right">{{ item.likes }}<i class="iconfont icon-dianzan"></i></div>
          </div>
        </div>
      </div>
    </div>


    <!-- 相似专辑 -->
    <div class="album">
      <div class="albumTitle">相似专辑</div>
      <div class="albumWrap">
        <div v-for="item in docs" :key="item.albumId" class="peopleCard">
          <div
            class="peopleImg"
            :style="`background-image: url(https://imagev2.xmcdn.com/${item.coverPath});`"
          >
            <div class="peopleImgBottom">
              <div class="iconfont icon-bofang_o-copy"></div>
              <div class="right">
                {{
                  ((item.playCount / 10000).toFixed(2) as any) < 10000
                    ? `${(item.playCount / 10000).toFixed(2)}万`
                    : `${(item.playCount / 100000000).toFixed(2)}亿`
                }}
              </div>
            </div>
          </div>
          <div class="peopleIntroduce">
            {{ item.intro || item.lastUpTrackTitle }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqPlayHeaderList , reqPlayList , reqAnchorList , reqAnchorWorks , reqComment , reqAlbum} from "@/api/play";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from 'vue-router'
// 跳转
const router = useRouter()
const toHome = () => {
  router.push('/home')
}
// 收参
const Route = useRoute();

// 点击是否有下拉数据
const flag = ref<boolean>(true)
const btn = () => {
  flag.value = false
}

// 返回内容的标签
const richIntro = ref<any>()



// 获取播放列表头部数据
// 头部图片部分
const playHearchImg = ref<any>();
// 头部文本部分
const albumRichInfo = ref<any>()
const getPlayHeaderList = async (id: number) => {
  let result = await reqPlayHeaderList(id);
  console.log(result,2222);
  // 头部图片部分
  playHearchImg.value = result.albumDetailInfo;
  // 头部文本部分
  albumRichInfo.value = result.albumRichInfo
  // 返回内容的标签
  richIntro.value = result.albumRichInfo.richIntro.replace(/<img/g, '<img width="100%"')
  richIntro.value = richIntro.value.replace(/<p/g, '<p style="font-size: 14px;margin-bottom: 10px;')
  // 主播 id
  anchorId.value = result.albumDetailInfo.albumInfo.anchorId
  // 请求主播数据
  gitAnchorList(anchorId.value as number)
  // 主播作品
  getAnchorWorks(anchorId.value as number , true)
  // 相似专辑
  getAlbum(result.albumDetailInfo.albumInfo.title , true)
};

const trackDetailInfos = ref<any>()
// 切换播放清单排序
const asc = ref<boolean>(false)
const convert = () => {
  asc.value = !asc.value
  getPlayList(Route.query.id , asc.value)
}
// 请求播放清单
const totalCount = ref<any>()
const getPlayList = async (id:number , asc : boolean) => {
  let result = await reqPlayList(id,asc)
  console.log(result)
  // 请求播放清单
  trackDetailInfos.value = result.trackDetailInfos
  // 节目数量
  totalCount.value = result.totalCount
}


// 获取主播信息
// 主播 id 
const anchorId = ref<number>()
// 主播数据初始化
const userInfo = ref<any>()
// 主播观看人数
const statCountInfo = ref<any>()
const gitAnchorList = async (id : number) => {
  let result = await reqAnchorList(id)
  console.log(result,1111)
  userInfo.value = result.userInfo
  statCountInfo.value = result.statCountInfo
}


// 获取主播作品
const albumBriefDetailInfos = ref<any>([])
const getAnchorWorks = async (id : number , asc : boolean) => {
  let result = await reqAnchorWorks(id , asc)
  console.log(result,9999)
  albumBriefDetailInfos.value = result.albumBriefDetailInfos
}

// 获取评论
const comments = ref<any>([])
const getComment = async (id : number) => {
  let result = await reqComment(id)
  console.log(result,888)
  comments.value = result.comments
}

// 相似专辑
// 专辑静态数据
const docs = ref<any>([])
const getAlbum = async (kw : string , spellchecker : boolean) => {
  let result = await reqAlbum(kw , spellchecker)
  console.log(result , 5555555)
  docs.value = result.album.docs
} 

onMounted(() => {
  getPlayHeaderList(Route.query.id);
  getPlayList(Route.query.id , asc.value)
  getComment(Route.query.id)
});
</script>

<style lang="scss" scoped>
.play {
  position: relative;
  
  // 背景
  .back {
    width: 375px;
    height: 206px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 375px , 206px;
    filter: blur(14px);
  }
  .header {
    width: 375px;
    height: 206px;
    position: absolute;
    top: 0;
    .playHeader {
      display: flex;
      justify-content: space-between;
      padding: 14px 10px 0px;
      background-color: #4c4d4f;
      .headerImg {
        img {
          width: 102px;
          height: 36px;
        }
      }
      .headerBtn {
        width: 62px;
        height: 28px;
        font-size: 16px;
        color: white;
        background-color: #f86442;
        border-radius: 30px;
        text-align: center;
        line-height: 28px;
      }
    }
    .playMain {
      display: flex;
      padding: 30px 20px 20px;
      width: 335px;
      height: 116px;
      .playLeft {
        width: 95px;
        height: 95px;
        position: relative;
        margin-right: 20px;
        border-radius: 10px;
        .playLeftImg {
          width: 95px;
          height: 95px;
        }
        .playLeftTitle {
          display: flex;
          position: absolute;
          bottom: 0;
          width: 100%;
          box-sizing: border-box;
          padding-left: 16px;
          color: white;
          background-color: rgba($color: #000000, $alpha: 0.2);
          .iconfont {
          }
          .playLeftNum {
            font-size: 14px;
          }
        }
      }
      .playRight {
        .playRightTop {
          font-size: 17px;
          color: white;
          margin-bottom: 6px;
        }
        .playRightMain {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .playRightMainImg {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;
            line-height: 20px;
            .Image {
              width: 20px;
              height: 20px;
            }
          }
          .playRightMainTitle {
            font-size: 12px;
            color: white;
          }
        }
        .playRightBottom {
          color: white;
          font-size: 13px;
          padding-top: 10px;
          border-top: 1px solid rgba($color: #fff, $alpha: 0.2);
        }
      }
    }
  }
  // 文本
  .mainText{
    width: 375px;
    background-color: white;
    height: 260px;
    overflow: hidden;
    position: relative;
    padding-top: 20px;
    .richIntro{
      padding: 10px;
      .fontS{
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
    .shade{
      position: absolute;
        margin-left: -320px;
        width: 1000px;
        height: 200px;
        border-radius: 50%;
        background-color:rgba($color: #fff, $alpha: .4);
        box-shadow: 0px 4px 80px rgba($color: #fff, $alpha: .9);
        bottom: 0px;
      }
    .mask{
      position: absolute;
      background-color: white;
      bottom: 0px;
      width: 375px;
      display: flex;
      flex-direction: column;
      align-items: center;
      // box-shadow: 0px -100px 200px rgba(255, 255, 255, 0.9); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
      
      .iconfont{
        margin-bottom: 40px;
      }
      .btn{
        border-radius: 30px;
        color: white;
        background-color: #F86745;
        padding: 10px 16px;
        font-size: 18px;
      }
    }
  }
  
  .mainText2{
    width: 375px;
    padding-top: 20px;
    background-color: white;
    .richIntro{
      padding: 10px;
      .fontS{
        background-color: #f86442;
        
      }
    }
 
    .mask{
      display: flex;
      justify-content: center;
      .btn{
      border-radius: 30px;
        color: white;
        background-color: #F86745;
        padding: 10px 16px;
        font-size: 18px;
    }
    }
    
  }

  .playList{
    padding: 10px;
    .playListTop{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .playListTopLeft{
        font-size: 18px;
        font-weight: bold;
      }
      .playListTopRight{
        font-size: 14px;
        .iconfont{
          font-size: 14px;
        }
      }
    }
    .playListBottom{
      .playListBottomCrad{
        display: flex;
        align-items: center;
        padding: 14px 0 18px;
        border-bottom: 1px solid rgba($color: #eee, $alpha: .8);
        .icon-bofang1-copy{
          font-size: 20px;
          margin-right: 10px;
        }
        .icon-download-1-copy-copy{
          font-size: 16px;
        }
        .title{
          font-size: 16px;
        }
      }
    }
    .bottom{
      margin-top: 10px;
      width: 375px;
      font-size: 16px;
      text-align: center;
      font-weight: bold;
      color: #F86745;
    }
  }

  .anchor{
    margin-top: 25px;
    padding: 0 14px;
    .anchorTop{
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .anchorMain{
      display: flex;
      align-items: center;
      .anchorImg{
        margin-right: 8px;
        margin-top: 4px;
        img{
          width: 54px;
          height: 54px;
        }
      }
      .anchorText{
        margin-right: 40px;
        .top{
          font-size: 16px;
        }
        .main{
          font-size: 12px;
          color: #999;
          padding: 2px 0 4px;
        }
        .bottom{
          font-size: 12px;
          color: #bbb;
        }
      }
      .anchorRight{
        color: #F86745;
        .iconfont{
          font-size: 30px;
        }
        .text{
          font-size: 12px;
        }
      }
    }
  }

  .peopleWrap {
    margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .peopleCard {
        margin-bottom: 14px;
        height: 130px;

        .peopleImg {
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 104px;
          height: 104px;
          border-radius: 10px;
          position: relative;

          .peopleImgBottom {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            width: 104px;
            bottom: 0;

            .iconfont {
              font-size: 18px;
              color: white;
            }

            .right {
              font-size: 13px;
              color: white;
            }
          }
        }

        .peopleIntroduce {
          // position: relative;
          width: 104px;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
  }

  .comment{
    margin-top: 25px;
    padding: 0 14px;
    .commentTop{
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .commentBottom{
      display: flex;
      margin-bottom: 16px;
      .commentBottomImg{
          width: 35px;
          height: 35px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 16px;
        img{
          width: 35px;
          height: 35px;
        }
      }
      .commentBottomText{
        width: 286px;
        .name{
          font-size: 14px;
          margin-top: 6px;
        }
        .main{
          font-size: 14px;
          padding: 10px 0;
          ::v-deep img {
            width: 14px;
            height: 14px;
          }
        }
        .reply{
          display: flex;
          justify-content: space-between;
          .left{
            font-size: 12px;
          }
          .right{
            font-size: 12px;
          }
        }
      }
    }
  }

  .album{
    .albumTitle{
      margin-left: 10px;
      margin-top: 30px;
      font-size: 18px;
      margin-bottom: 16px;
    }
    .albumWrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .peopleCard {
        margin-bottom: 14px;
        height: 130px;

        .peopleImg {
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 104px;
          height: 104px;
          border-radius: 10px;
          position: relative;

          .peopleImgBottom {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            width: 104px;
            bottom: 0;

            .iconfont {
              font-size: 18px;
              color: white;
            }

            .right {
              font-size: 13px;
              color: white;
            }
          }
        }

        .peopleIntroduce {
          // position: relative;
          width: 104px;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
